<template lang="html">
  <chart
    class="x-radar"
    :chartid='chartId'
    :option = 'options'
    :title='title'
  >
  </chart>
</template>

<script>
import {newline} from '../../../utils/tools'
import chart from './chart.vue'
export default {
  components : {
    chart,
  },
  props : {
    chartId :{
      type : String,
    },
    title : {
      type : String,
    },
    data : {
      type : Object,
    },
    indicator:{
    	type:Array,
    },
    Rank5seriesData:{
    	type:Array,
    },
    Rank5caseData:{
    	type:Array,
    }
  },
  data(){
    return {
      count : 200,
      options :  {
          tooltip: {},
          legend: {
            data: ['嫌疑人数指标', '刑拘数指标','逮捕数指标'],
            top : 30
          },
          radar: {
              // shape: 'circle',
              name: {
                  textStyle: {
                      color: '#fff',
                      backgroundColor: '#999',
                      borderRadius: 3,
                      padding: [3, 5]
                 },
                //  formatter : (params) => {
                //    return newline(params,4)
                //  }
              },
              center : ['50%','60%'],
              radius : 120,
              indicator: [
                 { name: '', max: 30000},
                 { name: '', max: 30000},
                 { name: '', max: 30000},
                 { name: '', max: 30000},
                 { name: '', max: 30000},
              ]
          },
          series: [{
              type: 'radar',
              // areaStyle: {normal: {}},
              data : [
                  {
                      value : [],
                      name : '嫌疑人数指标'
                  },
                   {
                      value : [],
                      name : '刑拘数指标'
                  },
                  {
                     value : [],
                     name : '逮捕数指标'
                 }
              ]
          }]
      }
    }
  },
  watch:{
  	Rank5caseData(val){
  		this.options.radar.indicator=val;
  	},
  	Rank5seriesData(val){
  		this.options.series[0].data[0].value = val['xyr'];
  		this.options.series[0].data[1].value = val['xj'];
  		this.options.series[0].data[2].value = val['db'];

  	}
  }
}
</script>

<style lang="scss" scoped>
    .x-radar {
      height: 100%;
    }
</style>
